<!-- 建筑管理 -->
<template>
  <div class="app-container">
    <TopMenu :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item label="">
            <el-form-item label="建筑名称:" prop="name">
              <el-input v-model="listQuery.name" clearable placeholder="请输入建筑名称" autocomplete="off"/>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/buildings/index']" type="primary" size="small" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button v-permission="['v1/buildings/create']" type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加建筑</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        ref="table"
        :data="list"
        row-key="index"
        max-height="373"
        size="small"
        class="tableDetail"
        element-loading-text="正在查询中。。。"
        stripe
        border
        fit
        highlight-current-row
        @expand-change="expandChange">
        <!-- @cell-mouse-enter="hoverTable1" -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- @cell-mouse-enter="hoverTable" -->
            <el-table v-loading="listDetailLoading" :data="props.row.detail" size="small" stripe border el-table-column fit highlight-current-row >
              <el-table-column align="center" label="楼层名" prop="name">
                <!-- <template slot-scope="scope">
                  <div v-if="scope.row.floorNameEdit===2" @mouseover="floorFnOver(scope.$index, props.row.index, 'floorNameEdit')">
                    <span>{{ scope.row.name }}</span>
                  </div>
                  <div v-else-if="scope.row.floorNameEdit===0" @mouseout="floorFnOut(scope.$index, props.row.index, 'floorNameEdit')">
                    <span>{{ scope.row.name }}</span>
                    <a href="javascript:void(0);" class="table-btn" @click="editFloorName(scope.$index, props.row.index)">【修改】</a>
                  </div>
                  <div v-else>
                    <el-input v-model="scope.row.name" clearable placeholder="请输入建筑名称" autocomplete="off" style="width:90px"/>
                    <a href="javascript:void(0);" class="table-btn" @click="enterFloorName(scope.$index, props.row.index)">【确定】</a>
                    <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, props.row.index, 'floorNameEdit')">【取消】</a>
                  </div>
                </template> -->
                <template slot-scope="scope">
                  <div v-show="scope.row.floorNameEdit===2" @mouseover="floorFnOver(scope.$index, props.row.index, 'floorNameEdit')">
                    <span>{{ scope.row.name }}</span>
                  </div>
                  <div v-show="scope.row.floorNameEdit===0" @mouseout="floorFnOut(scope.$index, props.row.index, 'floorNameEdit')">
                    <span>{{ scope.row.name }}</span>
                    <a href="javascript:void(0);" class="table-btn" @click="editFloorName(scope.$index, props.row.index)">【修改】</a>
                  </div>
                  <div v-show="scope.row.floorNameEdit===1">
                    <el-input v-model="scope.row.name" clearable autocomplete="off" style="width:100px;display: block;margin: 0 auto;"/>
                    <a href="javascript:void(0);" class="table-btn" @click="enterFloorName(scope.$index, props.row.index)">【确定】</a>
                    <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, props.row.index, 'floorNameEdit')">【取消】</a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="地上/地下" prop="is_above"/>
              <el-table-column align="center" width="300" label="层高 (m)" prop="floor_height">
                <!-- <template slot-scope="scope">
                  <div v-show="scope.row.floorHeightEdit===2" @mouseover="floorFnOver(scope.$index, props.row.index, 'floorHeightEdit')">
                    <span v-if="scope.row.floorHeightEdit">{{ scope.row.floor_height }}m</span>
                  </div>
                  <div v-show="scope.row.floorHeightEdit===0" @mouseout="floorFnOut(scope.$index, props.row.index, 'floorHeightEdit')">
                    <span>{{ scope.row.floor_height }}m</span>
                    <a href="javascript:void(0);" class="table-btn" @click="editFloorHeight(scope.$index, props.row.index)">【修改】</a>
                  </div>
                  <div v-show="scope.row.floorHeightEdit===1">
                    <el-input-number v-model="scope.row.floor_height" :precision="2" :step="0.1" size="mini" style="width: 140px;"/>
                    <a href="javascript:void(0);" class="table-btn" @click="enterFloorHeight(scope.$index, props.row.index)">【确定】</a>
                    <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, props.row.index, 'floorHeightEdit')">【取消】</a>
                  </div>
                </template> -->
                <template slot-scope="scope">
                  <div v-show="scope.row.floorHeightEdit===2" @mouseover="floorFnOver(scope.$index, props.row.index, 'floorHeightEdit')">
                    <span v-if="scope.row.floorHeightEdit">{{ scope.row.floor_height }}m</span>
                  </div>
                  <div v-show="scope.row.floorHeightEdit===0" @mouseout="floorFnOut(scope.$index, props.row.index, 'floorHeightEdit')">
                    <span>{{ scope.row.floor_height }}m</span>
                    <a href="javascript:void(0);" class="table-btn" @click="editFloorHeight(scope.$index, props.row.index)">【修改】</a>
                  </div>
                  <div v-show="scope.row.floorHeightEdit===1">
                    <el-input-number v-model="scope.row.floor_height" :precision="2" :step="0.1" size="mini" style="width: 140px;"/>
                    <a href="javascript:void(0);" class="table-btn" @click="enterFloorHeight(scope.$index, props.row.index)">【确定】</a>
                    <a href="javascript:void(0);" class="table-btn" @click="floorEnterFnOut(scope.$index, props.row.index, 'floorHeightEdit')">【取消】</a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="平面图">
                <template slot-scope="scope">
                  <div style="text-align: left;">
                    <!-- <el-upload
                      :limit="1"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/">
                    </el-upload> -->
                    <a href="javascript:void(0);" class="table-btn" @click="uploadBtn(scope.$index, props.row.index)">【上传】</a>
                    <input id="upload" name="plan" type="file" accept="image/*" @change="upload">
                    <a v-if="scope.row.plan" href="javascript:void(0);" class="table-btn" @click="lookBtn(scope.row, scope.$index, props.row.index)" >【查看】</a>
                  </div>
                  <!-- <el-upload
                    :limit="1"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/">
                    <a href="javascript:void(0);" class="table-btn" @click="uploadBtn(scope.$index, props.row.index)">【上传】</a>
                  </el-upload>
                  <a href="javascript:void(0);" class="table-btn">【查看】</a> -->
                </template>
              </el-table-column>
              <el-table-column align="center" label="绘制分区">
                <template slot-scope="scope">
                  <a href="javascript:void(0);" class="table-btn" @click="toPlotPartition(scope.row)">【绘制分区】</a>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" label="建筑名称" prop="name">
          <template slot-scope="scope"><span class="hink" @click="handleEdit(scope.row)">{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="使用性质" prop="building_property_name" />
        <el-table-column align="center" label="建筑结构" prop="structure_name" />
        <el-table-column align="center" label="建筑高（m）" prop="storey_height" />
        <el-table-column align="center" label="地上层数" prop="above_ground_floor" >
          <template slot-scope="scope"><span class="hink" @click="toFloorPage(scope.row)">{{ scope.row.above_ground_floor }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="地下层数" prop="under_ground_floor" >
          <template slot-scope="scope"><span class="hink" @click="toFloorPage(scope.row)">{{ scope.row.under_ground_floor }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="110" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 启用 v-if="scope.row.is_forbidden" -->
            <el-switch v-permission="['v1/buildings/enable']" v-model="scope.row.is_forbidden" active-text="已启用" inactive-text="已停用" active-color="#109008" inactive-color="#828282" @click.native.prevent="iconQiyong(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <formBuild
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        :dialog-visible.sync="dialogVisible"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import { parksList, buildList, buildUpdate, floorList, floorUpdate } from '@/api/park'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import TopMenu from '@/components/TopMenu' // 顶部菜单
import formBuild from './components/formBuild.vue'
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  name: 'Order',
  components: { Pagination, formBuild, TopMenu },
  data() {
    return {
      topDataLabel: {
        data: [],
        selectName: ''
      },
      topDataList: [],
      // 新增修改弹窗信息
      dialogForm: {
        corp_id: '',
        corp_name: '',
        name: '', // 建筑名称
        province: '', // 省
        city: '', // 市
        district: '', // 区
        address: '', // 详细地址
        longitude: '', // 经度
        latitude: '', // 纬度
        park_id: '', // 建筑群id
        park_name: '', // 建筑群名
        storey_height: '', // 建筑高度
        above_ground_area: '', // 地上面积
        under_ground_area: '', // 地下面积
        above_ground_floor: '', // 地上层数
        under_ground_floor: '', // 地下层数
        building_type: '', // 建筑类型
        building_property: '', // 使用性质
        structure: '', // 建筑物结构
        fireproof_endurance_rating: '', // 耐火等级
        danger_classes: '', // 危险系数
        acceptance_at: '', // 验收时间
        year_built: '' // 建造时间
      },
      dialogType: '添加',
      dialogVisible: false,
      // 表格
      list: [],
      total: 0,
      listLoading: false,
      listDetailLoading: false,
      listQuery: {
        page: 1,
        offset: 8,
        name: '',
        park_id: ''
      },
      listTopQuery: {
        page: 1,
        offset: 100,
        corp_id: ''
      },
      hoveIndex: 0,
      hoveIndexDetail: 0,
      indexParent: '',
      index: '',
      buildPurpose: this.GLOBAL.buildPurpose,
      buildingStructure: this.GLOBAL.buildingStructure
    }
  },
  computed: {
    // 计算属性
    getPageData() {
      return this.$route.params.parkData
    }
  },
  created() {
    if (!this.getPageData) {
      this.$router.push({
        name: 'parkManage'
      })
    } else {
      this.topDataLabel.selectName = this.getPageData.name
      this.listQuery.park_id = this.getPageData.park_id
      this.listTopQuery.corp_id = this.getPageData.corp_id
      this.getList()
      this.getTopList()
    }
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      this.listLoading = true
      const $table = this.$refs.table
      const that = this
      this.list.map((item) => {
        $table.toggleRowExpansion(item, false)
      })
      // $table.toggleRowExpansion(row)
      buildList(this.listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.list = []
            that.nameList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === 2
              array[index].building_property_name = that.buildPurpose[array[index].building_property]
              array[index].structure_name = that.buildingStructure[array[index].structure]
              array[index].index = index
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getTopList() {
      const that = this
      parksList(this.listTopQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.topDataLabel.data = []
            that.topDataList = []
            response.data.data.data.forEach(function(value, index, array) {
              that.topDataLabel.data.push(array[index].name)
              that.topDataList.push({
                name: array[index].name,
                id: array[index].park_id
              })
            })
          }
        })
        .catch(() => {
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    floorFnOver(index, indexParent, key) {
      this.list[indexParent].detail[index][key] = 0
    },
    floorFnOut(index, indexParent, key) {
      if (this.list[indexParent].detail[index][key] !== 1) {
        this.list[indexParent].detail[index][key] = 2
      }
    },
    floorEnterFnOut(index, indexParent, key) {
      this.list[indexParent].detail[index][key] = 2
      this.getList()
    },
    // 修改
    editFloorHeight(index, indexParent) {
      this.list[indexParent].detail[index].floorHeightEdit = 1
    },
    // 确定
    enterFloorHeight(index, indexParent) {
      const that = this
      var row = this.list[indexParent].detail[index]
      if (row.floor_height === 0) {
        that.$message.warning('层高必须大于0！')
        return false
      }
      this.list[indexParent].detail[index].floorHeightEdit = 0
      this.listLoading = true
      var params = {
        corp_id: row.corp_id,
        park_id: row.park_id,
        building_id: row.building_id,
        floor_id: row.floor_id,
        floor_height: row.floor_height
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          that.listLoading = false
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
        })
        .catch(() => {
          that.listLoading = false
          that.getList()
        })
    },
    // 修改
    editFloorName(index, indexParent) {
      this.list[indexParent].detail[index].floorNameEdit = 1
    },
    // 确定
    enterFloorName(index, indexParent) {
      const that = this
      var row = this.list[indexParent].detail[index]
      if (row.name === '') {
        that.$message.warning('请输入楼层名！')
        return false
      }
      this.listLoading = true
      this.list[indexParent].detail[index].floorNameEdit = 0
      var params = {
        corp_id: row.corp_id,
        park_id: row.park_id,
        building_id: row.building_id,
        floor_id: row.floor_id,
        name: row.name
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          that.listLoading = false
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
        })
        .catch(() => {
          that.listLoading = false
          that.getList()
        })
    },
    // 启用
    iconQiyong(index, data) {
      const is_forbidden = data.is_forbidden // 保存点击之后v-modeld的值(true，false)
      data.is_forbidden = !data.is_forbidden // 保持switch点击前的状态
      const that = this
      var flagText = is_forbidden ? '启用' : '停用'
      this.$confirm('此操作将' + flagText + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = {
          building_id: data.building_id,
          is_forbidden: is_forbidden ? '2' : '1'
        }
        buildUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getList()
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    // 添加建筑
    handleAdd() {
      this.dialogForm = {
        corp_id: this.getPageData.corp_id,
        corp_name: this.getPageData.corp_name,
        name: '', // 建筑名称
        province: this.getPageData.province, // 省
        city: this.getPageData.city, // 市
        district: this.getPageData.district, // 区
        address: '', // 详细地址
        longitude: '', // 经度
        latitude: '', // 纬度
        park_id: this.getPageData.park_id, // 建筑群id
        park_name: this.getPageData.name, // 建筑群名
        storey_height: '', // 建筑高度
        above_ground_area: '', // 地上面积
        under_ground_area: '', // 地下面积
        above_ground_floor: '', // 地上层数
        under_ground_floor: '', // 地下层数
        building_type: '', // 建筑类型
        building_property: '', // 使用性质
        structure: '', // 建筑物结构
        fireproof_endurance_rating: '', // 耐火等级
        danger_classes: '', // 危险系数
        acceptance_at: '', // 验收时间
        year_built: '' // 建造时间
      }
      this.dialogType = '添加'
      this.dialogVisible = true
    },
    // 修改建筑
    handleEdit(data) {
      this.dialogForm = JSON.parse(JSON.stringify(data))
      delete this.dialogForm['is_forbidden']
      this.dialogType = '修改'
      this.dialogVisible = true
      this.dialogForm.danger_classes = this.dialogForm.danger_classes + ''
      this.dialogForm.building_type = this.dialogForm.building_type + ''
      this.dialogForm.building_property = this.dialogForm.building_property + ''
      this.dialogForm.structure = this.dialogForm.structure + ''
      this.dialogForm.fireproof_endurance_rating = this.dialogForm.fireproof_endurance_rating + ''
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.getList()
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    // 表格树展开、收缩监听
    expandChange(row, expandedRows) {
      this.listDetailLoading = true
      const that = this
      const i = row.index
      const params = {
        building_id: row.building_id
      }
      floorList(params)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.list[i].detail = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === 2
              array[index].floorNameEdit = 2
              array[index].floorHeightEdit = 2
              array[index].is_above = array[index].is_above === 1 ? '地上' : '地下'
              that.list[i].detail.push(array[index])
            })
          }
          this.listDetailLoading = false
        })
        .catch((e) => {
          this.listDetailLoading = false
        })
    },
    // 点击地上层数/地下层数
    toFloorPage(row) {
      this.$router.push({
        name: 'floorManage',
        params: {
          buildData: row,
          park_id: this.listQuery.park_id
        }
      })
    },
    // 绘制分区
    toPlotPartition(row) {
      this.$router.push({
        name: 'plotPartition',
        params: {
          buildData: row
        }
      })
    },
    // 顶部切换监听
    tabsChange(data) {
      this.topDataList.forEach((item, index) => {
        if (item.name === data) {
          this.listQuery.park_id = item.id
          this.getList()
        }
      })
    },
    uploadBtn(index, indexParent) {
      $('#upload').click()
      this.index = index
      this.indexParent = indexParent
    },
    upload(e) {
      var file = e.target.files[0]
      const isImage = e.target.files[0].type.substr(0, 5) === 'image'
      const that = this
      if (!isImage) {
        that.$message.warning('请上传图片格式!')
        return false
      }
      const image = new window.FormData()
      image.append('plan', file)
      image.append('corp_id', that.list[parseInt(that.indexParent)].detail[that.index].corp_id)
      image.append('park_id', that.list[parseInt(that.indexParent)].detail[that.index].park_id)
      image.append('building_id', that.list[parseInt(that.indexParent)].detail[that.index].building_id)
      var params = {
        floor_id: that.list[parseInt(that.indexParent)].detail[that.index].floor_id,
        fileType: 'file',
        data: image
      }
      floorUpdate(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
          } else {
            that.$message.warning(data.message)
          }
          that.getList()
        })
        .catch(() => {
          that.getList()
        })
    },
    lookBtn(row, index) {
      this.$alert('<img src="' + row.plan + '" style="width:100%;height:400px;"/>', '查看图片', {
        dangerouslyUseHTMLString: true
      }).catch((e) => {
        console.log(e)
      })
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.upload-demo{
  width: 60px;
  display: inline-block;
}
#upload{
  display: none;
}
.table-btn{
  display: inline-block;
}
</style>
